<template>
  <div>
    <el-dialog
      :title="$t('AuthorityLang.select_user')"
      :visible.sync="Visible"
      width="1000px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <MyTable
          ref="roleUser_add"
          :gridOptions="{checkboxConfig:{checkField: 'checked', trigger: 'row', highlight: true}}"
          :tableColumn="tableColumn"
          :tableData="tableData"
          :isOrder="false"
          @sendCheckBoxList="setCheckBox"
          >
            <template v-slot:content="scope">
              <span>{{ scope.row[scope.config.prop] }}</span>
            </template>
        </MyTable>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {  },
  props: {
    // 接收绑定参数
    
    midHight: [Number,String],
  },
  data() {
    return {
      filterData:{
        role_id:'',
      },
      Visible: false,
      tableColumn: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          type: 'checkbox',
          width: 40,
        },
        {
          checked: true,
          label: this.$t('SubAccountManagementLang.Account_name'),
          prop: "name",
          width: 160,
          order:"",
        },

        {
          checked: true,
          label: this.$t('SubAccountManagementLang.Telephone'),
          prop: "mobile",
          width: 120,
          order:"",
        },
        {
          checked: true,
          label: this.$t('SubAccountManagementLang.mailbox'),
          prop: "email",
          width: 200,
          order:"",
        },
        {
          checked: true,
          label: this.$t('SubAccountManagementLang.Belonging_role'),
          prop: "role",
          width: 140,
          order:"",
        },
      ],
      tableData: [],
      sendDataArr:[],
      rows:[]
    };
  },
  created() {
    
  },
  mounted() {},
  watch: {
  },
  methods: {
    init(data,rows) {
      this.filterData.role_id=data
      this.Visible = true;
      this.rows=rows
      this.getTableData();
    },
    //获取表格数据
    async getTableData(){
      let arr=[]
      await this.$get('childMembers',{limit:-1}).then((res) => {
        this.tableData=res.data
        this.rows.forEach(el=>{
          if(res.data.filter(item=>{return item.uid==el.uid}).length>0){
            arr.push(res.data.filter(item=>{return item.uid==el.uid})[0])
          }
        })
      })
      this.toggleSelection(arr)
    },
    // 多选框勾选集合
    setCheckBox(data){
      this.sendDataArr=data
    },
    //默认勾选
    toggleSelection(rows) {
      console.log(rows)
      if (!!rows&&rows.length>0) {
        rows.forEach(row => {
          this.$refs.roleUser_add.$refs.tableRef.setCheckboxRow(row,true);
        });
        this.sendDataArr=this.tableData.filter(item=>{return item.checked})
      } else {
        this.$refs.roleUser_add.$refs.tableRef.clearCheckboxRow();
        this.sendDataArr=[]
      }
    },
    // 提交修改
    confirm() {
      //是否有空值必选项标识
      let type=true 
      if(type){
        let arr=this.sendDataArr.map((obj)=>{return ""+obj.uid})
        let params = new FormData();
          params.append("role_id", this.filterData.role_id);
          params.append("uids", JSON.stringify(arr));
        this.$postForm('addRoleMembers',params).then((res) => {
          if(res.success){
            this.cancel()
            this.$message.success(res.msg);
            this.$emit("success");
          }
        });
      }
    },
    //取消修改
    cancel(){
      this.toggleSelection()
      this.Visible = false;
    },
  },
};
</script>

<style scoped lang="less" >

</style>